<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于jquery的增删改2</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <div class="biger">
        <h2>基于jquery的增删改2</h2>
        查询:<input type="text" id="seaching" placeholder="请搜素关键字查询"><button id="seach">点击查询</button>
        <button id="clearing">清空所有</button>
        <button class="btn1" id="add1">添加人数</button><br>
        <ul class="add_ul_1">
            <li>
                全选:<input type="checkbox" id="selectAll">
                不选:<input type="checkbox" id="selectNo">
                反选:<input type="checkbox" id="selectBack">
            </li>
            <li>姓名</li>
            <li>性别</li>
            <li>年龄</li>
            <li>手机</li>
            <li>邮箱</li>
            <li>操作</li>
        </ul>
        <ul class="add_ul_2">
            <li><input type="checkbox"></li>
            <li class="nameId">詹姆斯·哈登</li>
            <li>男</li>
            <li>34</li>
            <li>18327614096</li>
            <li>1278703962@qq.com</li>
            <li><a href="javascript:void(0)" class="updata">修改</a>|<a href="javascript:void(0)" class="del">删除</a></li>
        </ul>
    </div>
    <div class="add_big" id="add_big">
        
        <div class="add_biger">
            <a href="#" class="error">×</a>
            <div>姓名：<input type="text" class="add_name" id="username" placeholder="请输入2-4位汉字">&nbsp;<span
                    id="error_name"></span></div>
            <div>性别：<select class="sel_sex">
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
            <div>年龄：<input type="text" class="add_age" id="userage" placeholder="请输入您的年龄">&nbsp;<span id="error_age"></span>
            </div>
            <div>手机：<input type="text" class="add_phone" id="phone" placeholder="请您输入11位有效手机号">&nbsp;<span
                    id="error_phone"></span></div>
            <div>邮箱：<input type="text" class="add_email" id="email" placeholder="请您输入有效邮箱地址">&nbsp;<span
                    id="error_email"></span></div>
            <div><button class="btn1">添加提交</button><button class="btn2">修改提交</button><span id="all_ts"></span></div>
        </div>
    </div>

    <script>
        $(function(){
            // 删除
            $(".biger").on("click",".del",function(){
                $(this).parent().parent().remove();
           });
        //添加
        $(".btn1").on("click",function(){
            if($(".add_big").css("display")=="none"){
                $(".add_big").fadeIn(500);
            }else{
                var gender=$(".sel_sex").val();
                if(+gender==0){
                    gender="男";
                }else if(+gender==1){
                    gender="女";
                }

               $(".add_ul_1").after("<ul class='add_ul_2'>"+
                "<li><input type='checkbox'></li>"+
                "<li>"+ $(".add_name").val() +"</li>"+
                "<li>"+ gender +"</li>"+
                "<li>"+ $(".add_age").val() +"</li>"+
                "<li>"+ $(".add_phone").val() +"</li>"+
                "<li>"+ $(".add_email").val() +"</li>"+
                "<li><a href='javascript:void(0)' class='updata'>修改</a>|<a href='javascript:void(0)' class='del'>删除</a></li>"
                +"</ul>");

                //淡入
                $(".add_big").fadeOut(500);
            
            }//
        })//点击添加弹出框的括号
        $(".updata").click(function(){
            $(".biger").on("click",".updata",function(){

            })
        })
        })//入口函数括号
    </script>
</body>
</html>